<template>
    <div class="handle-type">
        <Toast ref="msg" :msg="msg"></Toast>
        <div class="handle-page1" v-show="handleNum == 0">
                <!-- <ul>
                    <li v-for="(item,index) in page1List" :key="index" @click="checkDetail(index)"j>
                        <p><img src="../../assets/img/time-bg.png" alt=""><span>{{item.time}}</span></p>
                        <p><img src="../../assets/img/address-bg.png" alt=""><span class="span-width">{{item.address}}</span></p>
                        <p><img src="../../assets/img/result-bg.png" alt=""><span><i>{{item.type[0]}}</i>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<i>{{item.type[1]}}</i></span></p>
                        <p><span class="page-gray">案件编号: &nbsp;{{item.caseNumber}}</span><img class="img-width" src="../../assets/img/arrows.png" alt=""></p>                        
                    </li>
                </ul> -->
            <mu-container ref="container" class="mu-container">
                <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
                    <mu-list class="ul-list">
                            <mu-divider />
                                <mu-list-item class="resetStyle" v-for="(i,index) in num" :key="index">
                                    <div @click="checkDetail(i)">
                                        <p><img src="../../assets/img/time-bg.png" alt=""><span>{{page1List[i-1].time}}</span></p>
                                        <p><img src="../../assets/img/address-bg.png" alt=""><span class="span-width">{{page1List[i-1].address}}</span></p>
                                        <p><img src="../../assets/img/result-bg.png" alt=""><span><i>{{page1List[i-1].type[0]}}</i>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<i>{{page1List[i-1].type[1]}}</i></span></p>
                                        <p><span class="page-gray">案件编号: &nbsp;{{page1List[i-1].caseNumber}}</span><img class="img-width" src="../../assets/img/arrows.png" alt=""></p>                                                 
                                    </div>                                
                                </mu-list-item>
                            <mu-divider />
                    </mu-list>
                </mu-load-more>
            </mu-container>
        </div>
    </div>
</template>

<script>
import {http} from 'utils/request.js';
import api from '../../api/index.js';
import {getStorage, getUrlParams} from 'utils/commonUtil.js';
import Toast from '../../common/toast/toast';
export default {
    name: 'handle-type',
    data() {
        return {
            handleTab: ['待处理', '已定责'],
            handleNum: 0,
            page1List: [ ],
            msg: "找不到责任认定书",
            params: {
                mobile: '',
            },
            // 参数
            num: 0,
            refreshing: false,
            loading: false,
            total: 10,
        }
    },
    computed: {
        
    },
    components: {
        Toast
    },
    watch: {
        'page1List'() {
            if(this.total<5) {
                this.num = this.total;
            }
        }
    },
    methods: {
        toggleTab (index) {
            this.handleNum = index
        },
        handleDelete () {
            
        },
        checkDetail (a) {
            this.$router.push({
                name: "responsibility",
                query: {
                    accidentNo: this.page1List[a-1].caseNumber, // 被点击的案件编号
                    fromPage: 'handleType' 
                }
            });
            
        },

        // 
        refresh () {
            this.refreshing = true;
            this.$refs.container.scrollTop = 0;
            setTimeout(() => {
                this.refreshing = false;
                this.num = 5;
            }, 1000)
        },
        load () {
            this.loading = true;
            setTimeout(() => {
                this.loading = false;
                this.num += 5;
                if(this.num > this.total) {
                    this.num = this.total;
                }
            }, 1000)
        }
    },
    mounted() {
        
    },
    created() {
        document.title = '责任认定书查询';
        this.params.mobile = this.$route.query.mobile;
        http.get(api.API_GET_ACCIDENT_LIST,{
            mobile: this.params.mobile,
            accidentStatus: 6, // 状态为6时，查询的是已定责列表
        }).then((res) => {
            if(res.code=="1") {
                const Obj = res.resultObj.list;
                this.total = res.resultObj.total;
                if(Obj.length != 0) {
                    this.$refs.msg.close();
                    if(Obj.length < 10) {
                        this.num = Obj.length;
                    } else {
                        this.num = 10
                    }
                    for (var index = 0; index<Obj.length; index++) {
                        this.page1List[index] = {
                            time: Obj[index].accidentInfoBean.accidentCreateDateStr,
                            address: Obj[index].accidentInfoBean.accidentProvince + Obj[index].accidentInfoBean.accidentCity + Obj[index].accidentInfoBean.accidentArea + Obj[index].accidentInfoBean.accidentWhere,
                            caseNumber: Obj[index].accidentInfoBean.accidentNoStr,
                            type: ''
                        };  
                        if(Obj[index].carInfoBeans.length == 2) {                     
                            if(Obj[index].carInfoBeans[0].dutyPercent && Obj[index].carInfoBeans[0].dutyPercent == 1) {
                                this.page1List[index].type = [Obj[index].carInfoBeans[0].carNo + '  全责', Obj[index].carInfoBeans[1].carNo + '  无责']
                            } else if (Obj[index].carInfoBeans[0].dutyPercent && Obj[index].carInfoBeans[0].dutyPercent == 5) {
                                this.page1List[index].type = [Obj[index].carInfoBeans[1].carNo + '  全责', Obj[index].carInfoBeans[0].carNo + '  无责']
                            } else {
                                //提示信息
                                this.$toast.message({
                                    message: '系统信息异常，请稍后重试',
                                    color: '#F57979'
                                });
                            }
                        } else {
                            //提示信息
                            this.$toast.message({
                                message: '系统信息异常，请稍后重试',
                                color: '#F57979'
                            });
                        }
                    }
                }else {
                    this.$refs.msg.open();
                }
            }
        }).catch((error) =>{
            console.log(error);
        });
    }
}
</script>


<style lang="scss" scoped>
@import "~assets/css/mixin.scss"; 
.handle-page1 {
    width: 90%;
    margin: 0 auto;
    li {
        position: relative;
        background-color: #fff;
        padding: rem(10) rem(10) 0 rem(10);
        box-sizing:  border-box;
        border-radius: rem(3);
        margin-top: rem(15);
        img {
            display: inline-block;
            width: rem(13);
            height: rem(13);
            margin-right: rem(8);
        }
        span {
            display: inline-block;
            width: 80%;
            font-size: rem(13);
            color: #555555;
        }
        p:nth-child(2) {
            margin: rem(8) 0;
        }
        p {
            display: flex;
        }
        p:nth-child(3) {
           margin-bottom: rem(8);
        }
        p:nth-child(4) {
            height: rem(35);
            justify-content: space-between;
            align-items: center;
            border-top: rem(1) solid #F1F2F4;
        }
        .page-gray {
            color: #C9CCD0;
        }
        // .delete {
        //     position: absolute;
        //     top: rem(10);
        //     right: 0;
        //     width: rem(14);
        //     height: rem(15);
        // }
    }
}
.demo-loadmore-content {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.mu-container {
    padding: 0;
}
.ul-list {
    padding: 0;
}
.ul-list .mu-item {
    width: 100%;
    height: auto;
    display: block;
    padding: 0;
}
.mu-divider {
    height: 0 !important;
    background-color: transparent !important;
}
</style>
